//	报表拖拉拽容器+图表容器
import React from 'react';
// import RGL, { WidthProvider } from 'react-grid-layout';
import RGL from 'react-grid-layout';
import { SizeMe } from 'react-sizeme';
import 'react-grid-layout/css/styles.css';
import 'react-resizable/css/styles.css';
import ChartHeader from '../ChartHeader';
import Tools from '../ChartHeader/Tools';
import ChartsBase from '../ChartsBase';
import styles from './index.module.scss';
import { SCROLL_POSITION } from 'src/pages/AnalyseManage/EditReport/topics';
import ChartsTypeMap from 'src/pages/AnalyseManage/Components/ChartsType';
import { debounce } from 'src/libs/utils';
import PubSub from 'pubsub-js';
// const ReactGridLayout = WidthProvider( RGL );
const ReactGridLayout = RGL;

interface layoutProps {
	h: number;
	i: string;
	w: number
	x: number
	y: number
};

interface IProps {
	chartsLayout: Array<layoutProps>;
	currentKey: string;
	chartsList: Array<any>;
	layoutConfChange: ( config ) => void;
	onSelect: ( config: any ) => void;
	handleDelete: ( key: string ) => void;
	isEdit: boolean;
	handleCopyItem: ( item ) => void;
	onValuesChange: ( chartType: string, key: string, values: Object, configType: string ) => void;
	onAllValuesChange: ( values: Object, pageConfig?: Object, ) => void;
	pageId: string;
	tenantCode?: string;
}

export default class EditorCharts extends React.PureComponent<IProps> {

	state = {
		publisherId: '',	//	发布联动的图表id
		isChaining: false,		//	是否正在图表联动，（点击图表，开始联动，点击取消联动，关闭联动）
		drillChartsIds: []	//	正在下钻中的图表id
	};

	setChaining = ( publisherId, bool: boolean ) => {
		this.setState( {
			publisherId: bool ? publisherId : '',	//	取消联动，则把publisherId置为空
			isChaining: bool
		} );
	};

	//	设置开启下钻的id
	setDrilling = ( chartId ) => {
		if ( !this.state.drillChartsIds.includes( chartId ) ) {
			this.setState( {
				drillChartsIds: [ ...this.state.drillChartsIds, chartId ]
			} );
		}
	};

	//	取消下钻
	cancelDrill = ( chartId ) => {
		let index = this.state.drillChartsIds.indexOf( chartId );
		if ( index > -1 ) {
			const temp = Array.from( this.state.drillChartsIds );
			temp.splice( index, 1 );
			this.setState( {
				drillChartsIds: temp
			} );
		}
	};

	handleLayoutChange = ( layout: layoutProps ) => {
		this.props.layoutConfChange( layout );
	};

	publishScrollInfo = ( event ) => {
		PubSub.publish( SCROLL_POSITION, { bottom: event.target.getBoundingClientRect().bottom } );
	};

	componentDidMount(): void {
		document.getElementById( 'editor_body' ).addEventListener( 'scroll', debounce( this.publishScrollInfo, 500 ) );
	}


	render() {
		return (
			<SizeMe>
				{
					( { size } ) => (
						<ReactGridLayout
							className={ styles.layout } layout={ this.props.chartsLayout } cols={ 48 }
							rowHeight={ 10 }
							width={ size.width }
							// useCSSTransforms={false}
							compactType={ null }
							preventCollision={ true }
							isDraggable={ this.props.isEdit }
							isResizable={ this.props.isEdit }
							// onDragStop={this.handleLayoutChange}
							// onResizeStop={this.handleLayoutChange}
							onLayoutChange={ this.handleLayoutChange }
						>
							{ this.props.chartsList && this.props.chartsList.map( ( item, index ) => {
								return (
									<div
										key={ item.key }
										onMouseDownCapture={ () => this.props.onSelect( item ) }
										className={ `${ this.props.currentKey === item.key
											? styles.activeCharts
											: ''
										}` }
									>
										<ChartsBase
											config={ item.style }
											isCurrent={ this.props.currentKey === item.key }
										>
											<ChartHeader
												isCurrent={ this.props.currentKey === item.key }
												chartItem={ item.style }
												handleDelete={ this.props.handleDelete }
											></ChartHeader>
											<Tools
												isEdit={ this.props.isEdit }
												config={ item }
												isCurrent={ this.props.currentKey === item.key }
												id={ item.key }
												handleCopyItem={ () => this.props.handleCopyItem( item ) }
												publisherId={ this.state.publisherId }
												handleDelete={ this.props.handleDelete }
												isChaining={ this.state.isChaining }
												drillChartsIds={ this.state.drillChartsIds }
												cancelDrill={ ( chartId ) => this.cancelDrill( chartId ) }
												setChaining={ ( publisherId, bool ) => this.setChaining( publisherId, bool ) }></Tools>
											<div style={ {
												backgroundColor: item.style.chartBackgroundColor || '#fff',
												height: `calc(100% - ${ item.style.titleShow === false ? 0 : item.style.tilteHight || 40 }px)`
											} }>
												{
													ChartsTypeMap( item.type, {
														config: item,
														isCurrent: this.props.currentKey === item.key,
														key: item.key,
														id: item.key,
														pageId: this.props.pageId,
														chartsConfig: this.props.chartsList,
														chartLayout: this.props.chartsLayout.find( v => v.i === item.key ),
														onValuesChange: this.props.onValuesChange,
														onAllValuesChange: this.props.onAllValuesChange,
														tenantCode: this.props.tenantCode,
														setChaining: this.setChaining,
														setDrilling: this.setDrilling,
														drillChartsIds: this.state.drillChartsIds
													} )
												}
											</div>

										</ChartsBase>

										{
											this.props.currentKey === item.key ? <span className='iconfont bdhlashen'></span> : null
										}

									</div>
								);
							} ) }
						</ReactGridLayout>
					)
				}
			</SizeMe>
		);
	}
}

